<template>
    <div id="login">
        <h3>欢迎登录</h3>
        <el-form :label-position="labelPosition" label-width="80px" :model="user">
            <el-form-item label="用户名">
                <el-input v-model="user.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input type="password" v-model="user.password"></el-input>
            </el-form-item>
            <el-form-item >
                <el-button type="primary" size="medium" @click="submitForm">立即登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "LoginView",
        data(){
            return{
                labelPosition:'left',
                user:{
                    username:'',
                    password:''
                }
            }
        },
        methods:{
            // 用户登录回调函数
            submitForm(){  // 发送异步请求 完成用户登录   axios
                this.$http.get('http://localhost:8989/kgc/user/login',{
                    params:this.user
                }).then(res=>{
                    if (res.data.code==0){
                        // 用户登录成功 保存用户信息
                        sessionStorage.setItem("user",this.user);
                        this.$message({
                            type:"success",
                            message:res.data.msg,
                            onClose:()=>{
                                this.$router.push("/index")
                            }
                        })
                    }else {
                        this.$message.warning(res.data.msg)
                    }
                }).catch(err=>{
                    this.$message.error('服务器异常，请稍后再试!!!');
                })


            }
        }
    }
</script>

<style scoped>
    #login{
        width: 300px;
        height: 220px;
        margin: 200px auto 0;
        text-align: center;
    }
</style>
